function MenuDirection(){
	this.left = "l";
	this.down = "d";

	return this;
} 

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

function Menu(menuItems){
	this.menuItems = new Array();
	
	if (arguments.length == 1){
		this.menuItems = menuItems;
	}
	
	this.initEvents();
	
	return this;
}

//------------------------------------------------------------------------------------------------

Menu.prototype.initEvents = function(){
	
	for (var i=0; i<this.menuItems.length; i++){
		var menuItem = this.menuItems[i];
		
		XBrowserAddHandler(this.menuItems[i].menuTemplate, "mouseover", function onEvent(e){
			if (XBrowserTargetElement(e).id==menuItem.menuTemplate.id){
				menuItem.itemOver();
			}
		}, false);
		
		XBrowserAddHandler(this.menuItems[i].menuTemplate, "mouseout", function onEvent(e){
			if (XBrowserTargetElement(e).id==menuItem.menuTemplate.id){
				menuItem.itemOut();
			}
		}, false);
		
	}
	
};

//------------------------------------------------------------------------------------------------

Menu.prototype.addMenuItem = function(menuItem){
	this.menuItems.push(menuItem);
	this.initEvents();
};

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

function MenuItem(menuTemplate, submenuTemplate, submenuOpenDirection){
	this.menuTemplate = menuTemplate;
	this.submenuTemplate = submenuTemplate;
	this.submenuOpenDirection = submenuOpenDirection;
	
	this.log = function(msg){};
	
	
	var menuItem = this;

	XBrowserAddHandler(menuTemplate, "mouseover", function onEvent(e){
		menuItem.itemOver();
	}, true);

	XBrowserAddHandler(menuTemplate, "mouseout", function onEvent(e){
		menuItem.itemOut();
	}, true);
	
	return this;
}

//------------------------------------------------------------------------------------------------

MenuItem.prototype.itemOver = function(){
    var left = this.menuTemplate.offsetLeft;
    var offsetHeight = this.menuTemplate.offsetHeight;
    var top = offsetHeight - 5;
    
    left = left + this.menuTemplate.clientWidth - 5;
    top = this.menuTemplate.offsetTop;
    
    if (this.submenuOpenDirection==new MenuDirection().left){
    	top = (XBrowserElementOffsetTop(document.getElementById(this.menuTemplate.id)) + XBrowserElementHeight(document.getElementById(this.menuTemplate.id)) - 5) + "px";
    	left = (XBrowserElementWidth(document.getElementById(this.menuTemplate.id)) - 5) + "px";
    	
    	log(document.getElementById(this.menuTemplate.id).offsetTop);
    	log(document.getElementById(this.menuTemplate.id).clientHeight);
    	log(top);
    }
	    
    var submenuTemplate = getElement(this.menuTemplate, this.submenuTemplate.id);
    
    
    if (submenuTemplate==null){
        this.submenuTemplate.style.top = top;
        this.submenuTemplate.style.left = left;
        document.getElementById(this.menuTemplate.id).appendChild(this.submenuTemplate);
    }

    this.submenuTemplate.style.display = "";
};

//------------------------------------------------------------------------------------------------

MenuItem.prototype.itemOut = function(){
	this.submenuTemplate.style.display = "none";
};